<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import emitter from '../utils/emitter.js'

const isSidebarOpen = ref(true)
const toggleSidebar = () => {
  isSidebarOpen.value = !isSidebarOpen.value
  console.log('Sidebar toggled')
}

onMounted(() => {
  emitter.on('toggle-sidebar', toggleSidebar)
})
onUnmounted(() => {
  emitter.off('toggle-sidebar')
})
</script>

<template>
  <aside
      :class="{ 'w-48' : isSidebarOpen, 'w-14' :!isSidebarOpen }"
      class="fixed top-16 left-0 bottom-0 bg-white transition-all duration-300 ease-in-out"
  >
  </aside>
</template>
